<template>
    <div class="dicountCard">
        <div class="shopContent">
            <div class="colDirection" style="flex:1; text-align:center;">
                <span class="cardPrice">{{vardValueDesc}}{{unitDesc}}</span>
                <span class="cardCondition">{{condition}}</span>    
            </div>
            <div class="colDirection" style="flex:3; padding:0 10px;">
                <span class="cardName">{{name}}</span>
                <span class="cardDescription">{{description}}</span>
                <span class="cardTime">{{startAt}}--{{endAt}}</span>
            </div>
            <div class="colDirection" style="flex:1; text-align:center;" v-if="showBtn">
                <span class="btnForUse">立即使用</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'discountCard',
    props: {
        cardValue: {default: ''}, // 优惠券值，以分为单位
        vardValueDesc: {default: ''}, // 实际显示值
        unitDesc: {default: ''}, // 优惠券单位
        condition: {default: ''}, // 使用条件
        name: {default: ''}, // 优惠券名称
        description: {default: ''}, // 优惠券使用描述信息
        startAt: {default: ''}, // 可用开始时间
        endAt: {default: ''}, // 可用结束时间
        showBtn: {default: true}
    },

    data() {
        return {

        }
    }
}
</script>
<style lang="scss" scoped>
.shopContent{
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: row;
    background: #fff;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 10px;
    .colDirection{
        display: flex;
        justify-content: center;
        align-content: center;
        flex-direction: column;
        .cardPrice{
            font-size: 16px;
            color: #ff5400;
            font-weight: bold;
        }
        .cardCondition{
            font-size: 12px;
        }
        .cardName{
            font-size: 14px;
        }
        .cardDescription,.cardTime{
            color: #999;
            padding: 2px 0;
            font-size: 12px;
        }
        .btnForUse{
            display: block;
            line-height: 1;
            background: #ff5400;
            color: #fff;
            padding: 10px 0;
            border-radius: 6px;
        }
    }
}
</style>
